<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05-基本选择器</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
        $(function () {

            /**
             * 知识点：
             *  #id: id 选择器
             *  element: 元素选择器
             *  .class: 属性选择器
             *  *: 任意标签
             *  selector1, selector2, selectorN: 取多个选择器的并集(组合选择器)
             *  selector1selector2selectorN: 取多个选择器的交集(相交选择器)
            */

            /**
             * 1. 选择id为div1的元素
            */
            // $('#div1').css('background', 'red')

            /**
             * 2. 选择所有的div元素
            */
            // $('div').css('background', 'green')

            /**
             * 3. 选择所有class属性为box的元素
            */
            // $('.box').css('background', 'blue')

            /**
             * 4. 选择所有的div和span元素
            */
            // $('div, span').css('background', 'orange')

            /**
             * 5. 选择所有class属性为box的div元素
            */
            // $('div.box').css('background', 'pink')

            /**
             * 6. 选择所有元素
            */
            $('*').css('background', 'yellow')

        })
    </script>
</head>

<body>
    <div id="div1" class="box">div1(class="box")</div>
    <div id="div2" class="box">div2(class="box")</div>
    <div id="div3">div3</div>
    <span class="box">span(class="box")</span>

    <br>
    <ul>
        <li>AAAAA</li>
        <li title="hello">BBBBB(title="hello")</li>
        <li class="box">CCCCC(class="box")</li>
        <li title="hello">DDDDDD(title="hello")</li>
    </ul>
</body>

</html>